@charset "utf-8";
/* CSS Document */


body {
	font-family: Verdana, Geneva, sans-serif;	
	background-color: #000101;
	color: #FFFFFF;
	background-image: url(../images/siteStructure/gradient.jpg);
	background-repeat: repeat-x;
}

.clear { clear: both;}

h1{
color: #FFFFFF;
font-size: 18px;
}

h2{
color: #FFFFFF;
font-size: 14px;

}

hr {
color:#0e7382;
background-color: #0e7382;
border: 1px solid #0e7382;
}

a:link{
	color:#FFFFFF;
	text-decoration:none;
}

a:visited{
	color:#0e7382;
	text-decoration:none;
}

a:hover{
	color:#12a9bb;
	text-decoration:none;
}


#wrapper{
	position: relative;
	height: 100%;
	margin-top: -20px; /*gets rid of the gap at the top of the page*/
	margin-bottom: -20px; /*gets rid of the gap at the bottom of the page*/
	//background-color:#09F;
	background-image: url(../images/siteStructure/pixels.png);
	background-repeat: no-repeat;
	/* note, if you just wanted those gaps or wanted to make them even larger that's totally an aesthetic choice based on the page you're building obviously*/
}


#page {
	margin: 0px auto;
	width: 798px;
	border-left: solid 3px #1C2224;
	border-right: solid 3px #1C2224;
	background-image: url(../images/siteStructure/blackglass.png);
	min-height: 800px;
	padding-bottom: 5px;
	margin-bottom: 35px;
	border-bottom: solid 3px #1C2224;
	
}


#header {
	width: 100%;
	height: 140px;
	background-image: url(../images/siteStructure/header.png);
	background-repeat: no-repeat;
	//background-color: #00CC00;
	text-align:center;
}

/*===================LOGIN===================*/

#login {
	position:relative;
	border: solid 3px #0f7481;
	background-color:#1f2223;
	padding:10px;
	padding-top: 20px;
	float: right;
	right: 30px;
	width:230px;
	height:105px;
	font-size: 12px;

}


.loginToggle {
	position:relative;
	border: solid 3px #155159;
	background-color:#1f2223;
	padding:10px;
	float: right;
	right: 30px;
	width:200px;
	height:100px;
	z-index: 4;
	margin-top: -60px;
}


.styleimgs{
width: 100%;
height:40px;
text-align: left;
margin-top: 10px;
}

.styleimgs img {
 border: solid 2px #155159;
}

#logout{
float: left;
margin-top: 17px;
}

.stylePick{
width: 43px;
height: 34px;
float: right;
margin-top: 17px;
background-image: url(../images/siteStructure/dropdownBtn.png);
}


/*===================NAVIGATION===================*/

#nav {
	margin-top: -20px; /*closes the gap so that the nav juts right up against the header. you may or may not need this depending on what you're doing*/
	margin-bottom: 60px;
	width: 100%;
	height: 50px; /*you will probably want this for yours, I just disabled the limit for my html comments*/
	
}

#navProgress{
background-color:#263337;
border-top:solid 3px #1f2223;
border-bottom:solid 3px #1f2223;
width: 100%;
height: 20px;
}

#navProBar{
background-color:#0f7481;
width: 500px;
height: 20px;
}

#nav ul {
	padding-top: 15px;
}

#nav li {
	display: inline;
	list-style-type: none;
	padding-right: 20px;
} 

#nav a:link{
	color:#FFFFFF;
	text-decoration:none;
}

#nav a:visited{
	color:#FFFFFF;
	text-decoration:none;
}

#nav a:hover{
	color:#12a9bb;
	text-decoration:none;
}


#footer {
	width: 100%;
	height: 50px;
	text-align: center;
	padding-top: 10px;
	border-top:solid 3px #1f2223;
}

.content1{
	margin: 0px auto;
	margin-bottom: 40px;
	width: 700px;
	height:100%;
	background-color:#2d393e;
	padding: 15px;
	border: solid 3px #0f7481;
}

.content2{
	margin: 0px auto;
	margin-bottom: 40px;
	margin-top: 40px;
	width: 700px;
	height:100%;
	background-color:#2d393e;
	padding: 15px;
	padding-top: 5px;
	border: solid 3px #0f7481;
}


/*===================STUDENT PROFILE===================*/

#studentLeftWrap{
	//background-color:#60F;
	width: 350px;
	float:left;
	color: #12a9bb;
	//padding-top:20px;
	
}

#studentPic{
	border:solid 4px #0f7481;
	float:left;
}

#studentLevel{
	//border:solid 2px #0F3;
	width: 175px;
	float:right;
	padding-top: 15px;
}

#studentRightWrap{
	background-color:#1f2223;
	width: 280px;
	/*height: 150px;*/
	float:right;
	border: solid 3px #0f7481;
	color:#12a9bb;
	padding-left: 20px;
	padding-bottom: 20px;
	font-size: 12px;
}


/*===================OPPONENTS (Assignments)===================*/


.oppDiv{
	background-color:#1f2223;
	width: 665px;
	height: 75px;
	overflow: hidden;
	padding: 15px;
	margin: 0px auto;
	margin-bottom: 15px;
	margin-right: 10px;
	padding-bottom:25px;
	border: solid 3px #0f7481;
}

.oppDivOpen{
	background-color:#1f2223;
	width: 665px;
	height: 75px;
	overflow: hidden;
	padding: 15px;
	margin: 0px auto;
	margin-bottom: 15px;
	margin-right: 10px;
	padding-bottom:25px;
	border: solid 3px #12a9bb;
}

.oppRightWrap{
	//background-color:#FFFFFF;
	width: 550px;
	float:right;
	//height: 50px;
	margin-right: 15px;
}

.oppProgress{
width: 550px;
height: 25px;
background-color:#155159;
font-size: 16px;
padding-left: 10px;
margin-top: -15px;
}

.oppProgOpen{
width: 550px;
height: 25px;
background-color:#12a9bb;
font-size: 16px;
padding-left: 10px;
margin-top: -15px;
}

.oppIcon{
	float:left;
	height: 81px;
	width: 80px;
	background-color:#155159;
	//padding-top: -2px;
}

.oppIconOpen{
	float:left;
	height: 81px;
	width: 80px;
	background-color:#12a9bb;
	//padding-top: -2px;
}

.oppStats{
	width: 215px;
	float:left;
	//background-color:#60F;
	margin-top: -5px;
	
}

.oppTime{
	//background-color:#60F;
	width: 320px;
	float:right;
	text-align: right;
	margin-top: -5px;

}

.oppDesc{
margin-top:10px;
}

.toComplete{
font-size: 10px;
//color: #00CC00;
}


/*===================SPLASH PAGE===================*/

.newsDiv{
	background-color:#1f2223;
	width: 665px;
	height: 100%;
	overflow: hidden;
	padding-right: 15px;
	padding-left: 15px;
	margin: 0px auto;
	margin-bottom: 15px;
	padding-bottom:25px;
	border: solid 3px #0f7481;
	font-size: 12px;
}

.newsHeader{
width: 650px;
height: 25px;
background-color:#155159;
margin-bottom: 20px;
padding-left: 10px;

}

.newsDate{
position: relative;
font-size: 10px;
float: right;
margin-top: -25px;
//color: #0f7481;
}

/*===================PROGRESS BARS===================*/

#timeline{
padding-top: 30px;
padding-bottom: 10px;
}

.bartitle{
	float:left;
}

#profbartotal {
	border: 1px solid #333;
	height:15px;
	width:0px;
	//margin-left:175px;
	//margin-top:20px;
	margin-bottom:10px;
	background-color:#263337;
}

#profbar{
	border: 0px auto;
	background-color:#0f7481;
	height:15px;
	width:1px;
}

#modbar{
	border: 0px;
	background-color:#0f7481;
	height:30px;
	width:1px;
}

#modbars{
	margin-left: 25px;
	width: 650px;
	margin-top:20px;
}

#modbartotal {
	//border: 1px solid #333;
	height:30px;
	width:550px;
	float:right;
	//margin-left:150px;
	//margin-top:20px;
	margin-bottom:50px;
	background-color:#171c1c;
}

/*===================PROGRESS BAR MARKERS===================*/

#assMarkers{
    bottom: 4px;
    left: 112px;
    position: relative;

}

.assdiv {
	position:absolute;
	width:125px;
	height:125px;
	border:1px solid #666;
	background-color:black;
	display:none;
}

.assmarker {
	position:absolute;
	width:23px;
	height:62px;
	background-image: url(../images/siteStructure/marker.png);
	z-index: 4;
}

.donemarker {
	position:absolute;
	width:23px;
	height:62px;
	background-image: url(../images/siteStructure/markerdone.png);
	z-index: 4;
}


#dateMarkers{
	bottom: -15px;
    left: 105px;
    position: relative;
}

.datediv {
	font-size: 8px;
    margin-left: -4px;
    margin-top: -14px;
    position: absolute;
	color:#515d5d;
	display: none;
}

.datemarker {
	position:absolute;
	width:1px;
	height:5px;
	background-color:#515d5d;
	
}











#profile img {
	float:left;
	padding:10px;
}

#points {
	float:left;
	margin:10px;
	border:1px solid #666;
	width:80%;
	padding:10px;
}

#profile {
	float:left;
	margin:10px;
	height:190px;
	border:1px solid #666;
	width:60%;
	padding:10px;
}
#updates {
	float:left;
	margin:10px;
	border:1px solid #666;
	width:20%;
	height:190px;
	padding:10px;
}
#achievements {
	float:left;
	margin:10px;
	border:1px solid #666;
	width:40%;
	padding:10px;
}
#achievementnav {
	float:left;
	margin:10px;
	border:1px solid #666;
	width:15%;
	padding:10px;
}
.breakdown {
	position:absolute;
	border: solid 3px #1c2224;
	border-right: 0;
	background-image: url(../images/siteStructure/blackglass.png);
	padding:10px;
	left:60px;
	top:180px;
	width:200px;
	height:200px;
	display:none;
}
#formdiv {
	position:fixed;
	border: solid 3px #0f7481;
	//background-color:#FFFFFF;
	background-image: url(../images/siteStructure/blackglass.png);
	padding:10px;
	padding-top: 20px;
	left:500px;
	top:200px;
	width:350px;
	height:150px;
	display:none;
	text-align: center;
	z-index: 9001;
}
#currentmodule {
	float:left;
	margin:10px;
	height:190px;
	border:1px solid #666;
	width:83%;
	padding:10px;
}

#inventory {
	float:left;
	margin:10px;
	border:1px solid #666;
	width:40%;
	padding:10px;
}

#rewards {
	float:left;
	margin:10px;
	border:1px solid #666;
	width:40%;
	padding:10px;
	display:none;
}


#mod_desc{
float:left;
width:425px;
font-size: 10px;
color:#12a9bb;
padding-top: 20px;
}

#moddaysdata{
float:right;
text-align: right;
font-size: 10px;
color:#12a9bb;
padding-top: 20px;
}

.submitbtn{
text-align: right;
}


/*===================ITEMS PAGE===================*/

.items{
	margin: 0px auto;
	margin-bottom: 40px;
	margin-top: -3px;
	width: 700px;
	height:100%;
	background-color:#2d393e;
	padding: 15px;
	padding-top: 5px;
	border: solid 3px #0f7481;
}

#tabs{
width: 287px;
height: 38px;
margin-bottom: 0px;
margin-left: 31px;

}

.inventTab{

	width: 130px;
	height: 38px;
	float: left;
	padding-left:15px;
	background-image: url(../images/siteStructure/inventoryReward_I.png);
}

.rewardTab{

	width: 127px;
	height: 38px;
	float: right;
	padding-left:15px;
	background-image: url(../images/siteStructure/rewardInventory_I.png);
}

/*===================ACHIEVEMENTS===================*/

#achieve{
	margin: 0px auto;
	margin-bottom: 40px;
	margin-top: 40px;
	width: 740px;
	height:100%;
	//background-color:#00CC00;

}

#achieveCats{
width: 130px;
float: left;
}



.achieveCat{
width: 140px;
background-color:#2d393e;
border: solid 3px #0f7481;
margin-bottom: 15px;
padding-left: 15px;

}

#achievements {
width: 500px;
float: right;
background-color:#2d393e;
border: solid 3px #0f7481;
margin-right: 32px;
margin-top: -40px;
margin-bottom: 40px;
padding: 20px;
padding-bottom: 0px;

}



.achieveListDiv{
	background-color:#1f2223;
	width: 460px;
	height: 100%;
	overflow: hidden;
	padding: 15px;
	margin: 0px auto;
	margin-bottom: 15px;
	margin-right: 10px;
	padding-bottom:0px;
	border: solid 3px #0f7481;
}

.achieveRightWrap{
	//background-color:#FFFFFF;
	width: 350px;
	float:right;
	//height: 50px;
	margin-right: 15px;
}

.achieveProgress{
width: 350px;
height: 25px;
background-color:#155159;
font-size: 16px;
padding-left: 10px;
margin-top: -10px;
}

.achieveIcon{
	float:left;
	height: 81px;
	width: 80px;
	background-color:#155159;
	//padding-top: -2px;
}


.achieveReward{
	//background-color:#60F;
	width: 320px;
	float:right;
	text-align: right;
	margin-top: -5px;

}

.achieveDesc{
margin-top:10px;
}


/*===================ACHIEVEMENTS (NOT ACHIEVED)===================*/

.achieveNotIcon{
	float:left;
	height: 81px;
	width: 80px;
	background-color:#2f3e44;
	//padding-top: -2px;
}

.achieveNotProgress{
width: 350px;
height: 25px;
background-color:#2f3e44;
font-size: 16px;
padding-left: 10px;
margin-top: -10px;
}

.achieveNotDiv{
	background-color:#1f2223;
	width: 460px;
	height: 100%;
	overflow: hidden;
	padding: 15px;
	margin: 0px auto;
	margin-bottom: 15px;
	margin-right: 10px;
	padding-bottom:0px;
	border: solid 3px #171c1c;
}

.achieveNotDiv h2{
color: #5d6b70;
}

.toNotComplete {
font-size: 10px;
color: #5d6b70;
}



/*===================LEADERBOARDS===================*/


#leaderboards {
width: 500px;
float: right;
//background-color:#2d393e;
border: solid 3px #0f7481;
margin-right: 32px;
margin-top: -40px;
margin-bottom: 40px;
padding: 20px;
}


#graph{
	border-bottom:3px solid #171c1c;
	border-left:3px solid #171c1c;
	//background-color: #171c1c;
	height:300px;
	width:490px;
	visibility: hidden;
	margin-top: -300px;
	margin-left: 5px;
}

#boardcontent{
margin-top: -384px;
margin-left: 5px;
}


#assGraph{
	//border-left:3px solid #171c1c;
	//border-bottom:3px solid #171c1c;
	height:300px;
	width:600px;
	margin-top: 40px;
	margin-left: 20px;
}

.leaderbar {
	border: 0px auto;
	background-color:#155159;
	height:1px;
	width:20px;
	display:inline-block;
	margin-left:5px;
	margin-right:5px;
	margin-top:195px;
}

.yourbar{
	border: 0px;
	background-color:#0f7481;
	height:1px;
	width:20px;
	display:inline-block;
	margin-left:5px;
	margin-right:5px;
}

.assignbar {
	border: 0px;
	background-color:#155159;
	height:20px;
	width:1px;
	display:inline-block;
	
}

.assBarTotal {
	border: 0px;
	background-color:#1f2223;
	height:20px;
	width:360px;
	display:inline-block;
	margin-right: 15px;
	margin-top: 5px;
	margin-bottom: 25px;
	float: left;
}

.assBarText {
font-size: 10px;
margin-top: 8px;
float: right;
}

#boardcontent,#assignboards {
	float:left;
}


#graphTitle {
width: 100%;
text-align: center;
}